/*
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
*/

@import url("tools/typography.css");
@import url("shared/option-list.css");

:host {
  display: block;
  position: relative;
}

.project-item-card {
  background: var(--color-white);
  block-size: 100%;
  border-radius: 3px;
  box-shadow: 4px 4px 8px var(--color-box-shadow);
  inline-size: 100%;
  max-inline-size: 233px;
  min-block-size: 122px;
  padding: var(--spacing-16);

  &.with-actions {
    & .project-card-title {
      padding-inline-end: var(--spacing-12);
    }
  }

  &.placeholder {
    & tg-project-avatar {
      margin-block-end: var(--spacing-16);
    }
  }

  & .project-card-title {
    align-items: center;
    display: flex;
    margin-block-end: var(--spacing-16);
  }

  & .card-action {
    inset-block-start: var(--spacing-4);
    inset-inline-end: var(--spacing-4);
    position: absolute;
  }

  /* stylelint-disable */
  & .project-card-link {
    @mixin font-inline;

    color: var(--color-gray100);
    display: -webkit-box;
    font-weight: var(--font-weight-medium);
    line-height: 1rem;
    flex-grow: 1;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-wrap: break-word;

    & h3 {
      @mixin font-inline;

      font-weight: var(--font-weight-medium);
      margin: 0;
    }
  }
  /* stylelint-enable */

  /* stylelint-disable */
  & .project-card-description {
    @mixin font-small;
    color: var(--color-gray80);
    display: -webkit-box;
    line-height: 150%;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  /* stylelint-enable */

  & .project-card-image {
    margin-inline-end: var(--spacing-16);
  }
}

.project-item-link {
  margin-block-start: var(--spacing-8);
  text-decoration: underline;
}

/* Status invitation */

:host([variant="invitation"]) {
  inline-size: 100%;
  max-inline-size: 233px;
  position: relative;

  &:not([data-invite-status="accepted"]) {
    & .project-item-card {
      border: 1px solid var(--color-gray30);
      box-shadow: none;
    }

    & .project-card-image {
      opacity: 0.5;
    }

    & .project-card-link {
      color: var(--color-gray70);
      font-weight: var(--font-weight-regular);
    }
  }
}

.card-badge-container {
  margin-block-end: var(--spacing-16);
  margin-inline-end: var(--spacing-24);
  overflow: hidden;
}

.project-reject-invite[tuiIconButton] {
  inset-block-start: var(--spacing-8);
  inset-inline-end: var(--spacing-8);
  position: absolute;

  &::ng-deep .t-icon {
    block-size: var(--spacing-16);
    inline-size: var(--spacing-16);
  }
}

.project-accept-invite {
  inline-size: 100%;
}

.view-options-list {
  @mixin option-list;
}
